<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

		<title>Fx Tests</title>

		<script src="../../../Source/Core/Core.js" type="text/javascript"></script>
		<script src="../../../Source/Types/Array.js" type="text/javascript"></script>
		<script src="../../../Source/Types/Function.js" type="text/javascript"></script>
		<script src="../../../Source/Types/Number.js" type="text/javascript"></script>
		<script src="../../../Source/Types/String.js" type="text/javascript"></script>
		<script src="../../../Source/Types/Object.js" type="text/javascript"></script>
		<script src="../../../Source/Types/DOMEvent.js" type="text/javascript"></script>
		<script src="../../../Source/Browser/Browser.js" type="text/javascript"></script>
		<script src="../../../Source/Slick/Slick.Parser.js" type="text/javascript"></script>
		<script src="../../../Source/Slick/Slick.Finder.js" type="text/javascript"></script>
		<script src="../../../Source/Element/Element.js" type="text/javascript"></script>
		<script src="../../../Source/Element/Element.Event.js" type="text/javascript"></script>
		<script src="../../../Source/Element/Element.Style.js" type="text/javascript"></script>
		<script src="../../../Source/Class/Class.js" type="text/javascript"></script>
		<script src="../../../Source/Class/Class.Extras.js" type="text/javascript"></script>
		<script src="../../../Source/Fx/Fx.js" type="text/javascript"></script>
		<script src="../../../Source/Fx/Fx.CSS.js" type="text/javascript"></script>
		<script src="../../../Source/Fx/Fx.Tween.js" type="text/javascript"></script>
		<script src="../../../Source/Fx/Fx.Morph.js" type="text/javascript"></script>

		<style>

			body {
				font: 13px sans-serif;
			}

			h1 {
				border-top: 1px dashed #AAA;
				font: normal 22px sans-serif;
				margin: 5px 0;
				padding-top: 10px;
			}

			#content {
				top: 0;
				bottom: 0;
				left: 370px;
				position: absolute;
				overflow: auto;
				padding-bottom: 150px;
				right: 0;
			}

			#aside {
				background: #F5F5F5;
				border-right: 1px dashed #AAA;
				bottom: 0;
				font-family: monospace;
				left: 0;
				margin-right: 10px;
				overflow: auto;
				padding: 10px;
				position: absolute;
				top: 0;
				width: 340px;
			}

			.success {
				background: greenyellow;
			}

			.fail {
				background: orangered;
			}

			.box {
				background: greenyellow;
				border: 1px solid black;
				padding: 10px;
				width: 300px;
			}

			.wrapper {
				width: 500px;
				height: 300px;
				background: #eee;
			}

		</style>

	</head>
	<body>

		<div id="aside">
			<h2>Log</h2>
			<div id="log"></div>
		</div>

		<script>

			var logger = $('log');
			var log = function(msg, success){
				new Element('div', {
					'class': success == true ? 'success' : (success == false ? 'fail' : ''),
					text: msg
				}).inject(logger, 'top');
			};

		</script>

		<div id="content">

			<h1>Fx.Tween</h1>

			<p>
				<a href="#" id="simple-fx-tween-link">tween</a>
			</p>

			<div id="simple-fx-tween" class="box"></div>

			<script>

				var simpleFxTween = new Fx.Tween('simple-fx-tween', {
					property: 'width',
					link: 'cancel'
				});
				var simpleFxTweenToggle = true;

				$('simple-fx-tween-link').addEvent('click', function(event){
					event.preventDefault();
					simpleFxTween.start(simpleFxTweenToggle ? 500 : 200);
					simpleFxTweenToggle = !simpleFxTweenToggle;
				});

			</script>


			<h1>Fx.Morph</h1>

			<p>
				<a href="#" id="simple-fx-morph-link">morph</a>
			</p>

			<div id="simple-fx-morph" class="box"></div>

			<script>

				var simpleFxMorph = new Fx.Morph('simple-fx-morph');
				var simpleFxMorphToggle = true;

				$('simple-fx-morph-link').addEvent('click', function(event){
					event.preventDefault();
					simpleFxMorph.start(simpleFxMorphToggle ? {
						width: 500,
						height: 300
					} : {
						width: [400, 300],
						height: [250, '50px']
					});
					simpleFxMorphToggle = !simpleFxMorphToggle;
				});

			</script>

			<h1>Element.morph</h1>

			<p>
				<a href="#" id="fx-sun">start</a>
			</p>

			<div id="sun" class="box"></div>

			<style>
			#sun {
				width: 100px;
				height: 100px;
			}​
			</style>

			<script>
				var sun = document.id('sun').set("morph", {
					duration: 2000
				});
				var sunToggle = true;
				$('fx-sun').addEvent('click', function(event){
					event.preventDefault();
					sun.morph(sunToggle ? {
						width: '300px'
					} : {
						width: '200px'
					});
					sunToggle = !sunToggle;
				});
			</script>

			<h1>Fx.Morph with % as unit</h1>

			<p>
				<a href="#" id="units-fx-morph-link">morph</a>
			</p>

			<div class="wrapper">
				<div id="units-fx-morph" class="box"></div>
			</div>

			<script>

				var unitsFxMorph = new Fx.Morph('units-fx-morph', {
					unit: '%'
				});
				var unitsFxMorphToggle = true;

				$('units-fx-morph-link').addEvent('click', function(event){
					event.preventDefault();
					unitsFxMorph.start(unitsFxMorphToggle ? {
						width: 50,
						height: 50,
						'margin-left': 6
					} : {
						width: 30,
						height: 20,
						'margin-left': 0
					});
					unitsFxMorphToggle = !unitsFxMorphToggle;
				});

			</script>

			<h1>.fade</h1>

			<p>
				<a href="#" id="fade-link">fade</a><br>
				<span id="fade-opacity"></span>
			</p>

			<div class="wrapper">
				<div id="fade" class="box"></div>
				<h1 id="fade2" class="box">test</h1>
			</div>

			<script>
			var fadeToggle = 1;
			var fade = $('fade').set('tween', {
				onStart: function(){
					$('fade-opacity').set('text', fade.getStyle('opacity'))
						.appendText(' ' + fade.getStyle('visibility'));
				},
				onComplete: function(){
					$('fade-opacity').set('text', fade.getStyle('opacity'))
						.appendText(' ' + fade.getStyle('visibility'));
				}
			});
			fade.fade('hide');
			var fade2 = $('fade2');
			$('fade-link').addEvent('click', function(event){
				event.preventDefault();
				var to = fadeToggle++ % 5 / 4;
				fade.fade(to == 1 ? 'in' : (to == 0 ? 'out' : to));
				fade2.fade('hide');
				fade2.fade('in');
			});
			</script>

		</div>

	</body>
</html>
